<template>
  <div v-loading="isShopCartLoading">
    <div id="cart" v-if="fetchData.list.length > 0">
      <section class="cartMain">
        <div class="cartMain_hd">
          <ul class="order_lists cartTop">
            <li class="list_chk">
              <!--所有商品全选-->
              <input id="all" class="whole_check" type="checkbox" />
              <label
                :class="fetchData.status ? 'mark' : ''"
                for="all"
                @click="cartchoose()"
              ></label>
              全选
            </li>
            <li class="list_con">商品信息</li>
            <li class="list_info">商品参数</li>
            <li class="list_price">单价</li>
            <li class="list_amount">数量</li>
            <li class="list_sum">金额</li>
            <li class="list_op">操作</li>
          </ul>
        </div>
        <!-- 中间内容 -->
        <div v-for="item in fetchData.list" :key="item.mallCode">
          <div v-show="item.shopcarGoods.length > 0" class="cartBox">
            <div class="shop_info">
              <div class="all_check">
                <input
                  id="shop_a"
                  class="shopChoice"
                  type="checkbox"
                  disabled
                />
                <label
                  :class="item.check ? 'mark' : ''"
                  class="shop"
                  for="shop_a"
                  @click="shopchoose(item)"
                ></label>
              </div>
              <div class="shop_name" @click="goShopDetail(item)">
                店铺：<a href="javascript:;">{{ item.mallName }}</a>
              </div>
            </div>
            <div class="order_content">
              <ul
                v-for="pro in item.shopcarGoods"
                class="order_lists"
                :class="pro.status == 1 ? 'disabled_list' : ''"
                :key=""
              >
                <li class="list_chk">
                  <input
                    id="checkbox_2"
                    class="son_check"
                    type="checkbox"
                    disabled
                  />
                  <label
                    :class="pro.checked ? 'mark' : ''"
                    for="checkbox_2"
                    @click="choose(item, pro)"
                  ></label>
                </li>
                <li class="list_con">
                  <div class="list_img">
                    <a href="javascript:;"
                      ><img
                        alt=""
                        :src="pro.goodsPhoto"
                        width="80px"
                        height="80px"
                    /></a>
                  </div>
                  <div class="list_text" @click="gohome(pro)">
                    <a href="javascript:;">{{ pro.goodsName }}</a>
                    <!-- <span class="list_custom">定制</span> -->
                  </div>
                </li>
                <li class="list_info">
                  <p>规格：{{ pro.attrDesc }}</p>
                  <!-- <p>尺寸：16*16*3(cm)</p> -->
                </li>
                <li class="list_price">
                  <p class="price">￥{{ pro.priceCurrent / 100 }}</p>
                  <div class="charge">
                    <!-- <p>更多促销</p> -->
                    <div class="chargebox">测试</div>
                  </div>
                </li>
                <li class="list_amount">
                  <div class="amount_box">
                    <a
                      class="reduce reSty"
                      href="javascript:;"
                      @click="reduce(pro)"
                      >-</a
                    >
                    <input
                      v-model="pro.goodsQuantity"
                      disabled="disabled"
                      class="sum"
                      type="number"
                      @input="calculate(pro)"
                    />
                    <a class="plus" href="javascript:;" @click="add(pro)">+</a>
                  </div>
                </li>
                <li class="list_sum">
                  <p class="sum_price">
                    ￥{{ (pro.goodsQuantity * pro.priceCurrent) / 100 }}
                  </p>
                </li>
                <li class="list_op">
                  <p class="collect">
                    <!-- <a href="javascript:;" class="colBtn">收藏商品</a> -->
                  </p>
                  <p class="del">
                    <a
                      class="delBtn"
                      href="javascript:;"
                      @click="deleteCart(pro, 'one')"
                      >移除商品</a
                    >
                    <span v-if="pro.status == 1">商品已下架</span>
                  </p>
                  <p class="custom">
                    <!-- <a href="javascript:;" class="cusBtn">定制商品</a> -->
                  </p>
                  <div class="custombox">测试</div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!--底部结算-->
        <div class="bar-wrapper1">
          <div class="barLeft">
            <ul>
              <li class="list_chk" style="list-style: none">
                <input id="all" class="whole_check" type="checkbox" />
                <label
                  :class="fetchData.status ? 'mark' : ''"
                  for="all"
                  @click="cartchoose()"
                ></label>
                全选
              </li>
            </ul>
            <span class="delete-item" @click="deleteCart(fetchData, 'multi')"
              >删除选中的商品</span
            >
          </div>
          <div class="bar-right">
            <div class="piece">
              已选商品<strong class="piece_num">{{
                checkGoodsList.length
              }}</strong
              >件
            </div>
            <div class="totalMoney" style="margin-left: 40px">
              共计:
              <strong class="total_text">￥{{ totalPrice / 100 }}</strong>
            </div>
            <div class="calBtn">
              <a href="javascript:;" @click="payMents()">去结算</a>
            </div>
          </div>
        </div>
      </section>
      <!-- <section class="model_bg"></section>
      <section class="my_model">
        11111
        <p class="title">删除宝贝<span class="closeModel">X</span></p>
        <p>您确认要删除该宝贝吗？</p>
        <div class="opBtn">
          <a href="javascript:;" class="dialog-sure">确定</a
          ><a href="javascript:;" class="dialog-close">关闭</a>
        </div>
      </section> -->
    </div>
    <div class="wrap" v-else v-show="!loading">
      <div class="bomContent">
        <img
          alt=""
          height="330px"
          src="../../../../public/images/74.png"
          srcset=""
          width="330px"
        />
        <p>购物车空空如也，赶快去添加商品吧！</p>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
      <span>是否确定删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getShopCart,
  updateShoppingCart,
  deleteGoods,
  shoppingCartBill,
} from "@/api/mallApi/congLinMall";
import { getShoppingcarInfo } from "@/api/mallApi/congLinMall";
export default {
  name: "mallShoppingCart",
  data() {
    return {
      isShopCartLoading: false,
      checkGoodsList: [],
      checkedGoodsList: [],
      checkdGoods: {},
      totalPrice: 0,
      isMulti: false,
      dialogVisible: false,
      loading: false,
      fetchData: {
        list: [
          // {
          //   shop_id: 1,
          //   shop_name: "搜猎人艺术生活",
          //   products: [
          //     {
          //       pro_id: 101,
          //       text: "洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶",
          //       price: 480,
          //       num: 1,
          //       img: "../images/1.png",
          //       sum: 480,
          //       checked: false, //商品选中状态
          //     },
          //     {
          //       pro_id: 102,
          //       text: "花露水花露水花露水花露水花露水花露水花露水花露水",
          //       price: 680,
          //       num: 1,
          //       img: "./images/2.png",
          //       sum: 680,
          //       checked: false,
          //     },
          //     {
          //       pro_id: 103,
          //       text: "燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片",
          //       price: 380,
          //       num: 1,
          //       img: "./images/3.png",
          //       sum: 380,
          //       checked: false,
          //     },
          //   ],
          //   check: false, //店铺选中状态
          //   choose: 0, //商品选中个数
          // },
          // {
          //   shop_id: 2,
          //   shop_name: "卷卷旗舰店",
          //   products: [
          //     {
          //       pro_id: 201,
          //       text: "剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀",
          //       price: 580,
          //       num: 1,
          //       img: "./images/4.png",
          //       sum: 580,
          //       checked: false,
          //     },
          //     {
          //       pro_id: 202,
          //       text: "卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸",
          //       price: 780,
          //       num: 1,
          //       img: "./images/5.png",
          //       sum: 780,
          //       checked: false,
          //     },
          //   ],
          //   check: false,
          //   choose: 0,
          // },
          // {
          //   shop_id: 3,
          //   shop_name: "瓜皮的神秘商店",
          //   products: [
          //     {
          //       pro_id: 301,
          //       text: "眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片眼镜片",
          //       price: 180,
          //       num: 1,
          //       img: "./images/6.png",
          //       sum: 180,
          //       checked: false,
          //     },
          //     // {
          //     //   pro_id: 302,
          //     //   text: "凑数的凑数的凑数的凑数的凑数的凑数的凑数的凑数的",
          //     //   price: 280,
          //     //   num: 1,
          //     //   img: "./images/7.png",
          //     //   sum: 280,
          //     //   checked: false,
          //     // },
          //   ],
          //   check: false,
          //   choose: 0,
          // },
        ],

        status: false, // 全选选中状态
        allchoose: 0, // 店铺选中个数
      },
      mallItem: {},
      disabledRes: [],
    };
  },

  // computed: {
  //   selectedAll: {
  //     get() {
  //       console.log('selectedAll', this.fetchData?.list)
  //       return this.checkedGoodsList.every((shop) =>
  //         shop.shopcarGoods?.every((good) => good.check)
  //       );
  //     },
  //     set(value) {
  //       value
  //         ? this.fetchData.list.forEach((item) => this.shoptrue(item))
  //         : this.fetchData.list.forEach((item) => this.shopfalse(item));
  //     },
  //   },
  // },
  created() {
    this.getShopCart();
  },
  mounted() {
    this.timer = null; // 初始化定时器
  },

  methods: {
    getShoppingcarInfo() {
      getShoppingcarInfo().then((res) => {
        this.$store.dispatch("test/shopCarCount", res.data.shoppingcarCount);
      });
    },
    goShopDetail(query) {
      console.log("店铺", query);
      this.$router.push({
        path: "/mall/storeDetail",
        query,
      });
    },
    // goGoodsDetail(query) {
    //   console.log(query.id);
    //   this.$router.push({
    //     path: "/mall/product",
    //     query,
    //   });
    // },
    getShopCart() {
      if (this.loading) {
        return;
      }
      this.isShopCartLoading = true;
      this.loading = true;
      this.fetchData.list = [];
      getShopCart()
        .then((res) => {
          this.isShopCartLoading = false;
          this.loading = false;
          console.log(this.fetchData.status);

          res.data.map((item) => {
            item.shopcarGoods.map((i) => {
              return (i.checked = false);
            });
            this.fetchData.list.push(item);
          });
          this.fetchData.list.map((item) => {
            return (item.check = false);
          });
          this.fetchData.list.map((item) => {
            return (item.choose = 0);
          });
        })
        .catch(() => {
          this.isShopCartLoading = false;
        });
    },
    gohome(query) {
      console.log("商品", query);
      if (query.status == 2) {
        this.$router.push({ path: "/mall/product?id=" + query.goodsId });
      }
    },
    // 去结算
    payMents() {
      console.log("checkedGoodsList", this.checkedGoodsList);
      const cartInfo = {
        comeFrom: "2",
        totalAmount: this.totalPrice,
        list: this.checkedGoodsList,
      };

      this.disabledRes = this.checkGoodsList.filter((good) => good.status == 1);

      console.log(this.disabledRes);

      // console.log("购物车商品", cartInfo.list);
      if (this.checkGoodsList.length > 0) {
        if (this.disabledRes.length > 0) {
          this.$message.error("请先删除已下架的商品");
        } else {
          shoppingCartBill(cartInfo).then((res) => {
            this.$router.push({
              path: "/mall/submitOrder",
              cartInfo,
            });
          });
        }
      } else {
        this.$message.success("请先选择商品");
      }
    },

    // 确认删除按钮
    confirmClick() {
      if (this.fetchData.status) {
        this.cartchoose();
        this.checkedGoodsList = [];
        this.checkGoodsList = [];
        this.totalPrice = 0;
      }
      if (!this.isMulti) {
        this.confirDeleteGoods();
        this.checkGoodsList = [];
        this.totalPrice = 0;
      } else {
        this.deleteCheckGoods();
        this.checkGoodsList = [];
        this.totalPrice = 0;
      }
    },
    // 多选删除
    deleteCheckGoods() {
      const checkGoodIds = this.checkGoodsList.map((item) => {
        return item.id;
      });
      const params = {
        ids: checkGoodIds,
      };
      deleteGoods(params).then((res) => {
        this.dialogVisible = false;
        if (res.success) {
          this.getShopCart();
          this.getShoppingcarInfo(); //调购物车刷新
        }
      });
    },
    /**
     * 确认单个删除
     */
    confirDeleteGoods() {
      const params = {
        // memberId: '',
        ids: [this.checkdGoods.id],
      };
      deleteGoods(params).then((res) => {
        this.dialogVisible = false;
        if (res.success) {
          this.getShopCart();
          this.getShoppingcarInfo(); //调购物车刷新
        }
      });
    },
    /**
     * 删除
     */
    deleteCart(item, val) {
      if (this.checkGoodsList.length <= 0 && val == "multi") {
        this.$message.success("请先选择商品");
      } else {
        this.dialogVisible = true;
        if (val == "one") {
          this.checkdGoods = item;
          this.isMulti = false;
        } else {
          this.isMulti = true;
        }
      }
    },
    sum(arr) {
      return eval(arr.join("+"));
    },
    getTotalPrice(goodsList) {
      const allSum = goodsList.map((item) => {
        return item.goodsQuantity * item.priceCurrent;
      });
      if (this.checkGoodsList.length > 0) {
        this.totalPrice = this.sum(allSum).toFixed(2);
      } else {
        this.totalPrice = 0;
      }
    },
    //确认单选
    choosetrue(item, pro) {
      console.log("item", item);

      this.checkGoodsList.push(pro);
      let mall = this.checkedGoodsList.find((s) => s.mallCode == item.mallCode);
      if (mall) {
        mall.shopcarGoods.push(pro);
      } else {
        this.checkedGoodsList.push({
          ...item,
          shopcarGoods: [pro],
        });
      }

      // let choseGoods = choseList.shopcarGoods.filter(i => this.checkGoodsList.some(i2 => i2.id == i.id))
      // choseList.shopcarGoods = choseGoods
      // console.log(choseList);

      this.getTotalPrice(this.checkGoodsList);
      pro.checked = true; // 将商品选中状态改为true
      ++item.choose === item.shopcarGoods.length ? (item.check = true) : ""; // 这里执行了两部，选中商品数量先+1，再与该店铺商品数量比较，如果相等就更改店铺选中状态为true
      item.check
        ? ++this.fetchData.allchoose === this.fetchData.list.length
          ? (this.fetchData.status = true)
          : (this.fetchData.status = false)
        : ""; // 如果店铺选中状态改为true，选中店铺数量先+1，再与店铺数量比较，如果相等就更改全选选中状态为true
    },
    //取消单选
    choosefalse(item, pro) {
      this.checkGoodsList = this.checkGoodsList.filter(
        (item) => item.goodsId !== pro.goodsId
      );
      let mallIdx = this.checkedGoodsList.findIndex(
        (s) => s.mallCode == item.mallCode
      );
      let mall = this.checkedGoodsList[mallIdx];
      if (mall) {
        const idx = mall.shopcarGoods.findIndex(
          (good) => good.goodsId == pro.goodsId
        );
        mall.shopcarGoods.splice(idx, 1);
        if (mall.shopcarGoods.length == 0) {
          this.checkedGoodsList.splice(mallIdx, 1);
        }
      }
      this.getTotalPrice(this.checkGoodsList);
      pro.checked = false; // 将商品选中状态改为false
      --item.choose; // 选中商品数量-1
      if (item.check) {
        // 如果店铺是被选中的，更改店铺选中状态
        item.check = false;
        --this.fetchData.allchoose; // 并且选中店铺数量-1
      }
      this.fetchData.status = false; // 无论之前全选的状态，将其改为false就行
    },
    choose(item, pro) {
      !pro.checked ? this.choosetrue(item, pro) : this.choosefalse(item, pro);
    },
    shoptrue(item) {
      item.shopcarGoods.forEach((pro) => {
        pro.checked === false && this.choosetrue(item, pro); // 循环店铺中的商品，先筛选出目前没选中的商品，给它执行choosetrue函数
      });
    },
    shopfalse(item) {
      item.shopcarGoods.forEach((pro) => {
        pro.checked === true && this.choosefalse(item, pro); // 循环店铺中的商品，先筛选出目前被选中的商品，给它执行choosefalse函数
      });
    },
    shopchoose(item) {
      !item.check ? this.shoptrue(item) : this.shopfalse(item);
    },
    cartchoose() {
      this.fetchData.status = !this.fetchData.status; // 取反改变状态
      console.log("cartchoose", this.fetchData.status);
      this.fetchData.status
        ? this.fetchData.list.forEach((item) => this.shoptrue(item))
        : this.fetchData.list.forEach((item) => this.shopfalse(item)); // 根据取反后的状态进行相应的店铺按钮操作
      console.log("cartchoose2", this.fetchData.status);
    },
    add(pro) {
      clearTimeout(this.timer);
      // 设置新的定时器
      this.timer = setTimeout(() => {
        // 在定时器结束时执行函数逻辑
        console.log("执行防抖函数的逻辑");
        pro.goodsQuantity++;

        // pro.memberId = '1111'
        updateShoppingCart(pro).then((res) => {
          if (res.success) {
            this.getShopCart();
            this.getShoppingcarInfo();
          }
        });
      }, 500); // 设置防抖的时间间隔，例如500毫秒
      console.log("status", this.fetchData.status);
      if (this.fetchData.status) {
        this.cartchoose();
        this.checkedGoodsList = [];
        this.checkGoodsList = [];
        this.totalPrice = 0;
      }
      if (pro.checked) {
        this.totalPrice = (Number(this.totalPrice) + pro.priceCurrent).toFixed(
          2
        );
      }
    },
    reduce(pro) {
      if (pro.goodsQuantity === 1) return;
      pro.goodsQuantity--;
      updateShoppingCart(pro).then((res) => {
        if (res.success) {
          this.getShopCart();
          this.getShoppingcarInfo();
        }
      });
      if (this.fetchData.status) {
        this.cartchoose();
        this.checkedGoodsList = [];
        this.checkGoodsList = [];
        this.totalPrice = 0;
      }
      if (pro.checked) {
        this.totalPrice = (Number(this.totalPrice) - pro.priceCurrent).toFixed(
          2
        );
      }
    },
    calculate(pro) {
      console.log("pro", pro);
      const oldsum = pro.sum; // 之前的总价
      const oldnum = oldsum / pro.price; // 之前的数量
      pro.num = parseInt(pro.num);
      pro.num > 0 ? (pro.sum = pro.num * pro.price) : (pro.num = oldnum); // 如果输入数量大于0，计算价格，否则返回之前的数量
      const diffsum = pro.sum - oldsum; // 差价
      const diffnum = pro.num - oldnum; // 差量

      updateShoppingCart(pro).then((res) => {
        if (res.success) {
          this.getShopCart();
          this.getShoppingcarInfo();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "~@/styles/cart.scss";
.bomContent {
  width: 330px;
  height: 530px;
  margin: 0 auto;

  p {
    margin-left: 30px;
  }
}
.bar-wrapper1 {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  height: 50px;
  position: sticky;
  bottom: 0;
  background: #f8f8f8;

  .barLeft {
    display: flex;
    align-items: center;

    .delete-item {
      font-family: "Source Han Sans CN";
      font-size: 16px;
      font-weight: 400;

      margin-left: 10px;

      cursor: pointer;
      text-align: left;

      color: #1289ff;
    }
  }

  .bar-right {
    display: flex;
    align-items: center;

    .calBtn {
      line-height: 60px;

      width: 160px;
      height: 60px;
      margin-left: 65px;

      text-align: center;

      background: #1289ff;

      a {
        font-family: "Microsoft YaHei";
        font-size: 20px;
        font-weight: 400;

        color: #fff;
      }
    }
  }
}

/* 清除内外边距 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
  /* structural elements 结构元素 */

dl,
dt,
dd,
ul,
ol,
li,
  /* list elements 列表元素 */

pre,
  /* text formatting elements 文本格式元素 */

fieldset,
lengend,
// button,
input,
textarea,
  /* form elements 表单元素 */

th,
td {
  /* table elements 表格元素 */
  margin: 0;
  padding: 0;
}

/* 设置默认字体 */

body,
button,
input,
select,
textarea {
  /* for ie */
  /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
  font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
  /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 {
  font-size: 18px;
  /* 18px / 12px = 1.5 */
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
}

h4,
h5,
h6 {
  font-size: 100%;
}

address,
cite,
dfn,
em,
var {
  font-style: normal;
}

/* 将斜体扶正 */

code,
kbd,
pre,
samp,
tt {
  font-family: "Courier New", Courier, monospace;
}

/* 统一等宽字体 */

small {
  font-size: 12px;
}

/* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */

ul,
ol {
  list-style: none;
}

/* 重置文本格式元素 */

a {
  text-decoration: none;

  color: #000;
}

/*a:hover { text-decoration: underline; }*/

abbr[title],
acronym[title] {
  cursor: help;
  /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */

  border-bottom: 1px dotted;
}

q:before,
q:after {
  content: "";
}

/* 重置表单元素 */

legend {
  color: #000;
}

/* for ie6 */

fieldset,
img {
  border: none;
  cursor: auto;
}

/* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */

button,
input,
select,
textarea {
  font-size: 100%;
  /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */

table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* 重置 hr */

hr {
  height: 1px;

  border: none;
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */

html {
  overflow-y: scroll;
}

/*  浮动  */

.fl {
  float: left;
}

.fr {
  float: right;
}

/*  清除浮动  */

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;

  content: " ";
}

html,
body {
  position: relative;

  width: 100%;
  min-height: 950px;
}

#cart {
  background-color: #fff;
  box-shadow: 0 0 5px #fff; /* 白色 */
}

input[type="checkbox"] {
  display: none;
}

label {
  position: relative;
  z-index: 1;

  display: inline-block;

  width: 12px;
  height: 12px;
  margin-left: 10px;

  cursor: pointer;

  border: 1px solid #eb1313;
  border-radius: 1px;
}

label.mark {
  background: url("/images/mark1.png") no-repeat -1px -1px;
}

a:hover {
  text-decoration: underline;

  color: #ff8000;
}

.cartMain {
  position: relative;

  width: 1200px;
  min-width: 1200px;
  max-width: 1200px;
  min-height: 210px;
  margin: 0 auto;
  padding: 0 0 100px;
}

/*购物车头部*/
.cartMain_hd {
  line-height: 50px;

  width: 100%;
  height: 50px;

  color: #3c3c3c;
}

.cartMain_hd .cartTop {
  height: 50px;
}

.cartMain_hd .cartTop .list_chk {
  width: 80px;

  text-indent: 30px;
}

.cartMain_hd .cartTop .list_con {
  width: 312px;
}

.cartMain_hd .cartTop .list_chk label {
  position: absolute;
  top: 19px;
  left: 10px;

  margin: 0;
}

.cartMain_hd .cartTop .list_info {
  padding: 0;

  text-indent: 15px;
}

.cartMain_hd .cartTop .list_con {
  text-indent: 140px;
}

.cartBox {
  width: 100%;
  margin-bottom: 15px;
}

.cartBox .shop_info {
  line-height: 38px;

  position: relative;

  width: 100%;
  height: 38px;

  vertical-align: baseline;

  background-color: #fff;
}

.cartBox .shop_info .all_check {
  position: relative;

  float: left;

  width: 30px;
  height: 38px;
}

.cartBox .shop_info .all_check input[type="checkbox"] {
  position: absolute;
  z-index: 0;
  top: -20px;
  left: -20px;
}

.cartBox .shop_info .all_check .shop {
  position: absolute;
  top: 13px;
}

.cartBox .shop_info .shop_name {
  float: left;
}

/*商品列表*/
.cartBox .order_content {
  border: 1px solid #ccc;
  border-radius: 20px;
}

.cartBox .order_content a {
  display: block;
}

.order_charge {
  width: 100%;
  height: 40px;

  border-bottom: 1px solid #e7e7e7;
}

.order_charge p {
  line-height: 40px;

  display: inline-block;
}

.order_charge p.charge_info {
  margin: 0 30px 0 50px;
}

.order_charge p.charge_info span {
  padding: 2px;

  color: #f60;
  border: 1px solid #f60;
}

.disabled_list {
  cursor: no-drop;
  filter: grayscale(100%);
}

.order_lists {
  width: 100%;
  height: 130px;

  border-bottom: 1px solid #e7e7e7;
}

.order_lists:last-child {
  border-bottom: none;
}

.order_lists li {
  float: left;

  height: 100%;
}

.order_lists .list_chk {
  position: relative;

  width: 50px;
}

.order_lists .list_chk input[type="checkbox"] {
  position: absolute;
  z-index: 0;
  top: -20px;
  left: -20px;
}

.order_lists .list_chk label {
  margin: 20px 0 0 24px;
}

.order_lists .list_con {
  width: 340px;
}

.order_lists .list_con .list_img {
  float: left;

  width: 80px;
  height: 80px;
  margin-top: 20px;
}

.order_lists .list_con .list_img img {
  width: 100%;

  vertical-align: top;
}

.order_lists .list_con .list_text {
  line-height: 18px;

  float: left;

  width: 200px;
  margin: 20px 0 0 10px;
}

.order_lists .list_con .list_text a {
  margin-bottom: 5px;

  color: #3c3c3c;
  // white-space: nowrap; /* 防止换行 */
  // overflow: hidden; /* 隐藏超出部分 */
  // text-overflow: ellipsis; /* 显示省略符号 */
}

.order_lists .list_con .list_text a:hover {
  text-decoration: underline;

  color: #ff873e;
}

.order_lists .list_con .list_text .list_custom {
  padding: 3px;

  color: #fff;
  border-radius: 3px;
  background-color: #ff8000;
}

.order_lists .list_info {
  box-sizing: border-box;
  width: 245px;
  padding: 20px 0;
}

.order_lists .list_info p {
  line-height: 18px;

  margin-left: 15px;

  color: #9c9c9c;
}

.order_lists .list_price {
  width: 100px;
}

.order_lists .list_price .price {
  font-family: Verdana, Tahoma, arial;
  font-weight: bold;
  line-height: 18px;

  margin-top: 20px;

  color: #3c3c3c;
}

.order_lists .list_price .charge {
  position: relative;
  z-index: 4;
}

.order_lists .list_price .charge p {
  line-height: 15px;

  width: 56px;
  height: 22px;
  padding: 3px;

  color: #f00;
  border: 1px solid #f00;
}

.order_lists .list_price .charge .chargebox {
  z-index: 1;

  display: none;

  width: 300px;
  height: 110px;

  background: #000;
}

.order_lists .list_amount {
  width: 120px;
}

.order_lists .list_amount .amount_box {
  position: relative;

  width: 77px;
  height: 25px;
  margin-top: 20px;
}

.order_lists .list_amount .amount_box input {
  line-height: 15px;

  position: absolute;
  z-index: 2;
  left: 18px;

  float: left;

  width: 39px;
  height: 23px;
  padding: 4px 0;

  text-align: center;

  color: #343434;
  border: 1px solid #aaa;
  background-color: #fff;
}

.order_lists .list_amount .amount_box a {
  line-height: 23px;

  position: absolute;
  top: 0;

  float: left;

  width: 17px;
  height: 23px;

  text-align: center;

  color: #444;
  border: 1px solid #e5e5e5;
  background: #f0f0f0;
}

.order_lists .list_amount .amount_box a:hover {
  z-index: 3;

  text-decoration: none;

  color: #ff873e;
  border-color: #ff873e;
}

.order_lists .list_amount .amount_box .reduce {
  left: 0;
}

.order_lists .list_amount .amount_box .reSty {
  // color: #cbcbcb;
}

.order_lists .list_amount .amount_box .reSty:hover {
  // border-right: none;
  // border-color: #e5e5e5;
  // text-decoration: none;
  // color: #cbcbcb;
}

.order_lists .list_amount .amount_box .plus {
  right: 0;

  border-left-color: transparent;
}

.order_lists .list_sum {
  width: 140px;
}

.order_lists .list_sum .sum_price {
  font-family: Verdana, Tahoma, arial;
  font-weight: bold;
  line-height: 18px;

  margin-top: 20px;

  color: #900;
}

.order_lists .list_op {
  width: 164px;
}

.order_lists .list_op .collect {
  margin-top: 20px;
}

.order_lists .list_op .del {
  line-height: 40px;

  margin: 5px 0;
  span {
    border: 2px solid black;
    font-weight: 900;
  }
}

.order_lists .list_op .custombox {
  position: relative;
  z-index: 9;

  display: none;

  width: 200px;
  height: 350px;

  background-color: #000;
}

/*底部总计算价*/
.bar-wrapper {
  position: sticky;
  z-index: 99;
  bottom: 0px;
  width: 1200px;
  height: 50px;
  background: #e5e5e5;
}

.bar-wrapper .bar-right {
  float: right;

  color: #3c3c3c;
}

.bar-wrapper .bar-right strong {
  color: #900;
}

.bar-wrapper .bar-right .piece {
  line-height: 50px;

  float: left;

  min-width: 110px;
  height: 50px;
  margin-right: 20px;
}

.bar-wrapper .bar-right .piece .piece_num {
  font-family: tohoma, arial;
  font-size: 18px;
  font-weight: 700;

  display: inline-block;

  padding: 0 10px;
}

.bar-wrapper .bar-right .totalMoney {
  line-height: 50px;

  float: left;

  min-width: 100px;
  height: 50px;
}

.bar-wrapper .bar-right .totalMoney .total_text {
  font-family: Arial;
  font-size: 20px;
  font-weight: 400;

  float: right;

  margin-right: 10px;
  margin-left: 15px;

  vertical-align: middle;
}

.bar-wrapper .bar-right .calBtn {
  float: left;
}

.bar-wrapper .bar-right .calBtn a {
  font-size: 22px;
  line-height: 50px;

  display: block;

  width: 120px;
  height: 50px;

  cursor: not-allowed;
  text-align: center;
  text-decoration: none;
  letter-spacing: 5px;

  color: #fff;
  border-radius: 2px;
  background: #b0b0b0;
}

.bar-wrapper .bar-right .calBtn a.btn_sty {
  cursor: pointer;

  background: #ff873e;
}

/*自己定义的模态框*/
.model_bg {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;

  background: rgba(0, 0, 0, 0.6);
}

.my_model {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;

  display: none;

  width: 360px;
  height: 120px;
  margin-top: -50px;
  margin-left: -200px;
  padding: 20px;

  border: 1px solid #aeaeae;
  border-radius: 3px;
  background: #fff;
}

.my_model .title {
  font-size: 14px;
  font-weight: 700;

  margin-bottom: 20px;

  color: #3c3c3c;
}

.my_model .title .closeModel {
  float: right;

  cursor: pointer;
}

.my_model p {
  line-height: 16px;
}

.my_model .opBtn {
  margin-top: 20px;
}

.my_model .opBtn a {
  font-weight: 700;
  line-height: 28px;

  display: inline-block;

  width: 58px;
  height: 28px;
  margin-right: 10px;

  text-align: center;

  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;

  -ms-border-radius: 1px;
}

.my_model .dialog-sure {
  color: #fff;
  border: 1px solid #52a0e5;
  background: #52a0e5;
}

.my_model .dialog-close {
  color: #3c3c3c;
  border: 1px solid #d9d9d9;
  background: #fff;
}
</style>
